<!DOCTYPE html>
<html>
    <head>
        <title>打狗棒法</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
        <style type="text/css">
            body,html{margin:0;padding:0;font-size:16px;height:100%;background-color:#666}
            #content{width:100%;max-width:640px;height:100%;margin:0 auto;position:relative;overflow:hidden}

            @font-face {
                /* font-properties */
                font-family: DFPHaiBaoW12;
                src:url('img/DFPHaiBaoW12.ttf')
            }

            .start{height:100%;background:url(img/startBg.jpg) no-repeat top center;background-size:cover}
            .start-btn{width:100%;position:absolute;width:100%;top:auto;bottom:0;cursor:pointer}
            .start-btn img{width:44.68%;height:auto;margin:0 0 0 40%;display:block;}

            .game{width:100%;height:100%;display:none;text-align:center}
            .game canvas{margin:0 auto}

            .game-role{width:42.3%;position:absolute;bottom:5.94%;left:0;left:50%}
            .game-role img{width:100%}

            .rule{position:absolute;top:0;left:0;height:100%;width:100%;background-color:rgba(0,0,0,.5);display:none;z-index:3}
            .rule img:first-child{width:91.8%;height:auto;display:block;margin:0px auto 0;}
            .rule img:last-child{margin:0 auto;display:block;cursor:pointer;width:14.6875%}

            .over{position:absolute;top:0;left:0;height:100%;display:none;z-index:100}
            .over img.over-bg{width:100%}
            .over .content{position:absolute;top:0;left:0;z-index:2;width:100%;height:100%;overflow:hidden;-webkit-transform-origin:0 0}
            .over .defen{display:block;width:50%;overflow:hidden;text-align:center;margin:0 auto 0}            
            .over .defen .num{display:block;width:100%;overflow:hidden;height:100px;}
            .over .defen .num img{;position:relative;}
            .over .defen img.chenghao{display:block;font-size:18px;;display:block;margin : 45px auto 0;width:100%}
            .over p{position:absolute;width:100%;bottom:0;left:0;text-align:center}
            .over p a{display:inline-block;width:24%;margin:0 5px}
            .over p a img{display:block;width:100%;}
            .pointer-events{pointer-events:none}

            @media screen and (min-width:360px){
                .start{background-image:url(img/2x/startBg.jpg)}
            }

            .source{width:95px;height:57px;position:absolute;right:0;top:8px;pointer-events:none}
            .source-bg{width:80px;height:35px;background-color:black;position:absolute;right:0;top:11px;opacity:0.4}
            .source i{width:30px;height:30px;position:absolute;left:0;top:0;border-radius:50%;background-color:#000000;left:-15px;top:-11px}
            .source i:last-child{top:auto;bottom:-11px}
            .source span{position:absolute;z-index:2;font-size:18px;line-height:62px;text-align:center;color:white;width:80px;right:0}
            .source span:after{content:"分";font-size:14px;display:inline-block;margin-left:2px;position:relative;top:-2px;}
            .source p{font-size:80px;color:white;top:-50%;opacity:1;position:absolute;}

            .blood{width:85px;height:32px;top:19px;background-color:rgba(0,0,0,.4);border-radius:0 5px 5px 0;position:absolute;left:0;pointer-events:none}
            .blood i{display:inline-block;width:21px;height:18px;background:url(img/blood.png) no-repeat;margin:8px 1px 0}
            .blood-one i{background-position:bottom left;height:19px}
            .blood-one i:first-child{background-position:top left;height:18px}
            .blood-two i:last-child{background-position:bottom left;height:19px}
            .blood-zero i{background-position:bottom left;height:19px}

            .loading{position:absolute;top:0;left:0;width:100%;height:100%;z-index:2;background:url(img/game/2x/lawn.jpg) no-repeat top center;background-size:cover}
            .loading span{font-size:26px;text-align:center;width:100%;height:100%;line-height:400px;display:block;;color:white;background:url(img/game/2x/tree.png) no-repeat top center;background-size:cover}
            
            
                .start-btn{top:auto;bottom:9.3%;}
                .over p{bottom:10.5%}

            .reload-loading{position:absolute;width:100%;height:100%;z-index:999;background-color:rgba(0,0,0,.3);top:0;left:0;pointer-events:none}
            .reload-loading span{width:100%;text-align:center;top:0;left:0;color:white;font-size:40px;;position:absolute;-webkit-transition:.6s all}
        </style>
    </head>
    <body>
        <div id="content">
            <div class="start">
                <div class="start-btn"></div>
            </div>
            <div class="game">
                <canvas id="canvas"></canvas>
                <div class="source">
                    <span>0</span>
                    <div class="source-bg"><i></i><i></i></div>
                    <p style="opacity:0">+10</p>
                </div>
                <div class="blood">
                    <i></i><i></i><i></i>
                </div>
                <div class="loading">
                    <span>加载中...</span>
                </div>
            </div>
            <div class="rule">
                <img src="img/2x/rule.png" />
                <img class="rule-close" src="img/2x/rule-close.png" />
            </div>
            <div class="over">
                <img class="over-bg" src="img/2x/over.png" />
                <div class="content">
                    <span class="defen">
                    </span>
                    <p>
                        <a href="#"><img src="img/2x/btn-link.png" alt="领取苏宁手机购物券" /></a>
                        <a href="javascript:void(0)" class="replay"><img src="img/2x/btn-again.png" alt="在玩一次" /></a>
                        <a href="#"><img src="img/2x/btn-share.png" alt="分享到朋友圈" /></a>
                    </p>

                </div>
            </div>
        </div> 
        <script>var HOST = '';</script>       
        <script>
        </script>
        <script src="js/lib/easeljs-0.8.0.min.js"></script>
        <script src="js/lib/preloadjs-0.6.0.min.js"></script>
        <script src="js/lib/TweenMax.min.js"></script>
        <script src="js/app/app.js"></script>
        <script src="js/app/main.js"></script>
    </body>
</html>